<template>
    <div>
        <span style="font-weight: bold;"> 分娩日期:</span>&emsp;
        <el-date-picker v-model="form.DateTime" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
            format="YYYY-MM-DD  " />&emsp;&emsp;
        <span style="font-weight: bold;"> 种母耳号: </span>&emsp;
        <el-select style="width: 100px" clearable v-model="form.EweID" placeholder="请选择">
            <el-option v-for="item in eweData" :label="item.earNumber" :value="item.sleepInforId" />
        </el-select>&emsp;
        <span style="font-weight: bold;"> 转出栋舍: </span>&emsp;
        <el-select style="width: 100px" v-model="form.CurrentBarn" clearable placeholder="请选择">
            <el-option v-for="item in Recordcottage" :label="item.cottageName" :value="item.cottagesId" />
        </el-select>&emsp;
        <br>
        <span style="font-weight: bold;"> 转入栋舍: </span>&emsp;
        <el-select style="width: 100px" v-model="form.TransferBarn" clearable placeholder="请选择">
            <el-option v-for="item in Recordcottage" :label="item.cottageName" :value="item.cottagesId" />
        </el-select>&emsp;
        <span style="font-weight: bold;"> 窝号: </span>&emsp;
        <el-input style="width: 100px" v-model="form.LitterID"></el-input>
        <span style="font-weight: bold;"> 负责人: </span>&emsp;
        <el-select v-model="form.Leader" multiple placeholder="请选择" style="width: 240px">
            <el-option label="罗翔" value="罗翔" />
            <el-option label="扬家霖" value="扬家霖" />
            <el-option label="雷鑫" value="雷鑫" />
            <el-option label="王单青" value="王单青" />
            <el-option label="温暖暖" value="温暖暖" />
            <el-option label="杨杰" value="杨杰" />
            <el-option label="赵丽" value="赵丽" />
            <el-option label="黄强" value="黄强" />
            <el-option label="吴敏" value="吴敏" />
            <el-option label="周亮" value="周亮" />
            <el-option label="徐蕾" value="徐蕾" />
            <el-option label="孙伟" value="孙伟" />
            <el-option label="李霞" value="李霞" />
            <el-option label="马超" value="马超" />
            <el-option label="郭丽" value="郭丽" />
            <el-option label="高峰" value="高峰" />
            <el-option label="何敏" value="何敏" />
            <el-option label="林静" value="林静" />
            <el-option label="罗文" value="罗文" />
            <el-option label="蒋娜" value="蒋娜" />
        </el-select>
        <el-button type="danger" style="float: right;;margin-left: 10px;" @click="getTable">查询</el-button>
    </div>
    <br />
    <hr style="border: 4px solid lightgray;" />
    <div style="margin-top: 10px;">
        <el-button type="danger" style="float: left;;margin-left: 10px;">+ 新增</el-button>&emsp;
        <el-button type="danger" :icon="Delete" style="float: left;;margin-left: 10px;"
            @click="DeletesRange">删除</el-button>
    </div>
    <h2 style="background-color:lightpink;margin-top: 20px;" v-if="totals != 0"> &emsp;&emsp;已选择 {{ totals }} 条</h2>
    <hr style="border: 4px solid lightgray;margin-top: 20px;" />
    <el-table :data="tableData" height="400" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" />
        <el-table-column prop="motherGivingBirthId" label="序号" />
        <el-table-column prop="eweName" label="耳号" />
        <el-table-column prop="pregnancyDays" label="妊振天数">
            <template #default="scope">
                {{ scope.row.pregnancyDays }}天
            </template>
        </el-table-column>
        <el-table-column prop="deliveryEase" label="分娩难易">
            <template #default="scope">
                {{ scope.row.deliveryEase == 1 ? '顺产' : scope.row.deliveryEase == 2 ? '难产' : '助产' }}
            </template>
        </el-table-column>
        <el-table-column prop="batchNumber" label="肥羊批次">
            <template #default="scope">
                {{ scope.row.batchNumber }}号
            </template>
        </el-table-column>
        <el-table-column prop="maternalBehavior" label="母性">
            <template #default="scope">
                {{ scope.row.maternalBehavior }}分
            </template>
        </el-table-column>
        <el-table-column prop="lactation" label="泌乳">
            <template #default="scope">
                {{ scope.row.lactation ? '是' : '否' }}
            </template>
        </el-table-column>
        <el-table-column prop="mastitis" label="乳房炎">
            <template #default="scope">
                {{ scope.row.mastitis ? '是' : '否' }}
            </template>
        </el-table-column>
        <el-table-column prop="litterID" label="窝号" />
        <el-table-column prop="healthyLambsCount" label="键羔数" />
        <el-table-column prop="weakLambsCount" label="弱羔数" />
        <el-table-column prop="deformedLambsCount" label="畸形胎" />
        <el-table-column prop="stillbornLambsCount" label="死胎数" />
        <el-table-column prop="mummifiedLambsCount" label="木乃伊数" />
        <el-table-column prop="malformedFetusCount" label="畸胎数" />
        <el-table-column prop="liveLambs" label="活羔数" />
        <el-table-column prop="litterTotalWeight" label="窝总重（公斤）" />
        <el-table-column prop="gender" label="性别">
            <template #default="scope">
                {{ scope.row.gender ? '公' : '母' }}
            </template>
        </el-table-column>
        <el-table-column prop="currentBarn" label="当前栋舍" />
        <el-table-column prop="currentPen" label="当前栏位" />
        <el-table-column prop="transferBarn" label="转入栋舍" />
        <el-table-column prop="transferPen" label="转入栏位" />
        <el-table-column prop="name" fixed="right" width="120" label="操作">
            <template #default="scope">
                <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="danger" link @click="DeletesRange()">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination style="float: left" v-model:current-page="form.PageIndex" v-model:page-size="form.PageSize"
        :page-sizes="[5, 10, 15, 20]" layout="slot" :total="form.totalCount" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
        <el-button v-for="item in form.totalPage" :disabled="form.PageIndex == item"
            style="background-color: lightpink;" @click="handleCurrentChange(item)">{{
                item
            }}</el-button>
    </el-pagination>
    <el-pagination style="float: right;" v-model:current-page="form.PageIndex" v-model:page-size="form.PageSize"
        :page-sizes="[5, 10, 15, 20]" layout="  prev, pager, next" :total="form.totalCount"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>
<script lang="ts" setup>
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
} from '@element-plus/icons-vue'
import { reactive, ref, onMounted, computed } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
//调用持久化
import { useCounterStore } from '@/stores/counter';
const counterStore = useCounterStore();
const route = useRoute();
const router = useRouter();


//钩子函数
onMounted(() => {
    getTable()//获取表格数据
    geteweData()//获取耳号
    getRecordcottage()//剧哦去获取栋舍
})


const form = reactive({
    motherGivingBirthIds: [],
    EweID: '',
    Leader: '',
    CurrentBarn: '',
    TransferBarn: '',
    LitterID: '',
    DateTime: [],
    PageIndex: 1,
    PageSize: 5,
    totalPage: 1,
    totalCount: 1,
})
const multipleSelection = ref<any>([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
    form.motherGivingBirthIds = multipleSelection.value.map((item: any) => item.motherGivingBirthId)

    console.log(form.motherGivingBirthIds)
}

//计算属性 
const totals = computed(() => {
    let totalNumber = 0;
    form.motherGivingBirthIds.forEach((item: any) => {
        totalNumber += 1
    })
    return totalNumber
})


//获取耳号
const eweData = ref<any>([]);
const geteweData = () => {
    axios.get('http://localhost:5039/api/SleepBegin/SelectEarFeMale').then(res => {
        eweData.value = res.data.data;
    })
}
//获取栋舍
const Recordcottage = ref<any>([]);
const getRecordcottage = () => {
    axios.post('http://localhost:5039/api/Cottages/CottageList', {
    }).then(res => {
        Recordcottage.value = res.data.data;
    })
}

//分页
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`);
    form.PageSize = val;
    getTable();
};
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`);
    form.PageIndex = val;
    getTable();
};
//查询表数据
const tableData = ref([]); //获取数据
const getTable = () => {
    let MinDate = null
    let MaxDate = null
    console.log(form.Leader)
    console.log(form.DateTime)
    if (form.DateTime !== null) {
        MinDate = form.DateTime[0]
        MaxDate = form.DateTime[1]
    }
    console.log(MinDate)
    axios.get('http://localhost:5039/api/ProductionManagement/MotherGivingBirthList', {
        params: {
            PageIndex: form.PageIndex,
            PageSize: 5,
            EweID: form.EweID || 0,
            Leader: form.Leader,
            CurrentBarn: form.CurrentBarn || 0,
            TransferBarn: form.TransferBarn || 0,
            LitterID: form.LitterID || 0,
            MinDate: MinDate,
            MaxDate: MaxDate,
        }
    }).then(res => {
        tableData.value = res.data.item;
        form.totalCount = res.data.totalCount;
        form.totalPage = res.data.totalPage;
        console.log('获取数据成功');
    })

}


//批量删除
const DeletesRange = () => {
    axios.post('http://localhost:5039/api/ProductionManagement/MotherGivingBirthDelet', {
        motherGivingBirthIds: form.motherGivingBirthIds
    }).then(res => {
        if (res.data.code == 0) {
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            getTable()
        }
    })
}

const handleEdit = (row: any) => {
    console.log(row);
};
const handleDelete = (row: any) => {
    console.log(row)
}










</script>

<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>
